/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Typography,
  Upload, DatePicker, Button,
} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import moment from 'moment'
import find from 'lodash/find'
import request from '@/utils/request';
import filter from 'lodash/filter'
const { Text } = Typography;
const FormItem = Form.Item;
const { MonthPicker} = DatePicker;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users:[],
      fileList:[],
      meterArr: [],
      meterArr2: [],
      address:[{ name: "行次"},
        { name: "年初数"},
        { name: "期末数"}],
      address2:[{ name: "行次_2"},
        { name: "年初数_2"},
        { name: "期末数_2"}],
    };
  }

  componentDidMount() {
    const that=this;
    let arr=[
      {name:'流动资产:',key:'zc1',line:'',offset:'0'},
      {name:'货币资金',key:'zc2',line:'1',offset:'1'},
      {name:'短期投资',key:'zc3',line:'2',offset:'1'},
      {name:'应收票据',key:'zc4',line:'3',offset:'1'},
      {name:'应收账款',key:'zc5',line:'4',offset:'1'},
      {name:'减:坏账准备',key:'zc6',line:'5',offset:'2'},
      {name:'应收账款净额',key:'zc7',line:'6',offset:'1'},
      {name:'预付账款',key:'zc8',line:'7',offset:'1'},
      {name:'应收股利',key:'zc9',line:'8',offset:'1'},
      {name:'其他应收款',key:'zc10',line:'9',offset:'1'},
      {name:'存款',key:'zc11',line:'10',offset:'1'},
      {name:'其中:原材料',key:'zc12',line:'11',offset:'2'},
      {name:'库存商品',key:'zc13',line:'',offset:'3'},
      {name:'待摊费用',key:'zc14',line:'12',offset:'1'},
      {name:'待处理流动资产净损失',key:'zc15',line:'13',offset:'1'},
      {name:'一年内到期的长期债券投资',key:'zc16',line:'14',offset:'1'},
      {name:'其它流动资产:',key:'zc17',line:'15',offset:'1'},
      {name:'流动资产合计',key:'zc18',line:'20',offset:'0'},
      {name:'非流动资产',key:'zc19',line:'',offset:'0'},
      {name:'长期投资',key:'zc20',line:'21',offset:'1'},
      {name:'固定资产原价',key:'zc21',line:'24',offset:'1'},
      {name:'减:累计折旧',key:'zc22',line:'25',offset:'2'},
      {name:'固定资产净值',key:'zc23',line:'26',offset:'1'},
      {name:'在建工程',key:'zc24',line:'28',offset:'1'},
      {name:'固定资产清理',key:'zc25',line:'27',offset:'1'},
      {name:'长期待摊费用',key:'zc26',line:'29',offset:'1'},
      {name:'无形资产',key:'zc27',line:'36',offset:'1'},
      {name:'减:累计摊销',key:'zc28',line:'',offset:'1'},
      {name:'无形资产净额',key:'zc29',line:'35',offset:'1'},
      {name:'递延资产',key:'zc30',line:'37',offset:'1'},
      {name:'非流动资产合计',key:'zc31',line:'',offset:'0'},
      {name:'资产总计',key:'zc32',line:'45',offset:'0'},

    ]
    let arr2=[
      {name:'流动负债:',key:'fz1',line:'',offset:'0'},
      {name:'短期借款',key:'fz2',line:'51',offset:'1'},
      {name:'应付票据',key:'fz3',line:'52',offset:'1'},
      {name:'应付账款',key:'fz4',line:'53',offset:'1'},
      {name:'预收账款',key:'fz5',line:'54',offset:'1'},
      {name:'其他应付款',key:'fz6',line:'58',offset:'1'},
      {name:'应付职工薪酬',key:'fz7',line:'60',offset:'1'},
      {name:'其中:应付工资',key:'fz8',line:'61',offset:'2'},
      {name:'应付福利',key:'fz9',line:'',offset:'3'},
      {name:'应交税费',key:'fz10',line:'62',offset:'1'},
      {name:'其中:应交税金',key:'fz11',line:'',offset:'2'},
      {name:'未付利润',key:'fz12',line:'64',offset:'1'},
      {name:'预提费用',key:'fz13',line:'67',offset:'1'},
      {name:'代扣税金',key:'fz14',line:'68',offset:'1'},
      {name:'一年内到期的长期负债',key:'fz15',line:'69',offset:'1'},
      {name:'其它流动负债',key:'fz16',line:'70',offset:'1'},
      {name:'流动负债合计',key:'fz17',line:'75',offset:'0'},
      {name:'非流动负债:',key:'fz18',line:'',offset:'0'},
      {name:'长期借款',key:'fz19',line:'76',offset:'1'},
      {name:'长期应付款',key:'fz20',line:'77',offset:'1'},
      {name:'专项应付款',key:'fz21',line:'78',offset:'1'},
      {name:'其它长期负债',key:'fz22',line:'79',offset:'1'},
      {name:'长期负债合计',key:'fz23',line:'83',offset:'1'},
      {name:'负债合计',key:'fz24',line:'',offset:'1'},
      {name:'所有者权益:',key:'fz25',line:'',offset:'0'},
      {name:'实收资本',key:'fz26',line:'86',offset:'1'},
      {name:'资本公积',key:'fz27',line:'93',offset:'1'},
      {name:'减:库存股',key:'fz28',line:'',offset:'2'},
      {name:'盈余公积',key:'fz29',line:'94',offset:'1'},
      {name:'未分配利润',key:'fz30',line:'96',offset:'1'},
      {name:'所有者权益合计',key:'fz31',line:'98',offset:'1'},
      {name:'负债及所有者权益总计',key:'fz32',line:'100',offset:'1'},
    ]
    console.log('address',this.state.address)
    if(this.props.editRecord){
      console.log('items',this.props.editRecord.items)
    }
    let meterArr=this.state.meterArr
    let meterArr2=this.state.meterArr2
    for(let i=0;i<arr.length;i++){
      meterArr.push({
        ...arr[i]
      })
    }
    for(let i=0;i<arr2.length;i++){
      meterArr2.push({
        ...arr2[i]
      })
    }

    console.log('meterArr',meterArr)
    this.setState({meterArr,meterArr2})
  }
  renderColumn=(item)=>{
    let renderColumnItem=[]
    const {getFieldDecorator} = this.props.form;
    for(let i=0;i<this.state.address.length;i++){
      if(i===0){
        renderColumnItem.push(
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`${this.state.address[i].name}$${item.key}`, {
              initialValue: item.line,
            })(
              <Input style={{ width: '100%', fontWeight: 'bold' }} disabled/>,
            )}
          </FormItem>
        )
      }else{
        if(this.props.editRecord){
          renderColumnItem.push(
            <FormItem
              style={{ flex: '1', marginRight: '0' }}

            >
              {getFieldDecorator(`${this.state.address[i].name}$${item.key}`, {
                initialValue: find(this.props.editRecord.items[i].items,(o)=>{
                  return o.key===item.key
                }).value,
              })(
                <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
              )}
            </FormItem>
          )
        }else{
          renderColumnItem.push(
            <FormItem
              style={{ flex: '1', marginRight: '0' }}

            >
              {getFieldDecorator(`${this.state.address[i].name}$${item.key}`, {
                initialValue: '',
              })(
                <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
              )}
            </FormItem>
          )
        }
      }

    }
    return renderColumnItem
  }
  renderColumn2=(item)=>{
    let renderColumnItem=[]
    const {getFieldDecorator} = this.props.form;
    let items2=[];
    if(this.props.editRecord){
      items2=filter(this.props.editRecord.items,function(o) {
        return o.name.indexOf('_2')>=0
      })
    }
    for(let i=0;i<this.state.address2.length;i++){
      if(i===0){
        renderColumnItem.push(
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`${this.state.address2[i].name}$${item.key}`, {
              initialValue: item.line,
            })(
              <Input style={{ width: '100%', fontWeight: 'bold' }} disabled/>,
            )}
          </FormItem>
        )
      }else{
        if(this.props.editRecord){
          renderColumnItem.push(
            <FormItem
              style={{ flex: '1', marginRight: '0' }}

            >
              {getFieldDecorator(`${this.state.address2[i].name}$${item.key}`, {
                initialValue: find(items2[i].items,(o)=>{
                  return o.key===item.key
                }).value,
              })(
                <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
              )}
            </FormItem>
          )
        }else{
          renderColumnItem.push(
            <FormItem
              style={{ flex: '1', marginRight: '0' }}

            >
              {getFieldDecorator(`${this.state.address2[i].name}$${item.key}`, {
                initialValue: '',
              })(
                <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
              )}
            </FormItem>
          )
        }
      }

    }
    return renderColumnItem
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    };
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };
    const {getFieldDecorator} = this.props.form;
    const meterForms = this.state.meterArr.map((item, index) => {
      return (
        <Form style={{ display: 'flex' }} className={'custom-table-form'} key={index} layout="inline">
          <div  style={{ width: '220px',
            lineHeight: '29px',
            paddingLeft:'8px',
            textIndent:Number(item.offset)*30,
            fontWeight:(item.offset==='0'||item.name.indexOf('合计')>=0||item.name.indexOf('总计')>=0)?'bold':'',
            textAlign:(item.name.indexOf('合计')>=0||item.name.indexOf('总计')>=0)?'center':'',
            border: '1px solid #d9d9d9' }}>
            {item.name}
          </div>
          {this.renderColumn(item)}
        </Form>
      );
    });
    const meterForms2 = this.state.meterArr2.map((item, index) => {
      return (
        <Form style={{ display: 'flex' }} className={'custom-table-form'} key={index} layout="inline">
          <div  style={{ width: '220px',
            lineHeight: '29px',
            paddingLeft:'8px',
            textIndent:Number(item.offset)*30,
            fontWeight:(item.offset==='0'||item.name.indexOf('合计')>=0||item.name.indexOf('总计')>=0)?'bold':'',
            textAlign:(item.name.indexOf('合计')>=0||item.name.indexOf('总计')>=0)?'center':'',
            border: '1px solid #d9d9d9' }}>
            {item.name}
          </div>
          {this.renderColumn2(item)}
        </Form>
      );
    });
    return (
      <div>
        <h1 style={{textAlign:'center'}}>资产负债表</h1>
        <Form onSubmit={this.handleSubmit} style={{textAlign:'center'}}>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               月份
            </span>
            )}
          >
            {getFieldDecorator('month', {
              initialValue: this.props.editRecord?moment(this.props.editRecord.customize.month):moment(),
            })(
              <MonthPicker allowClear={false} />
            )}
          </FormItem>

        </Form>
        <div style={{ border: '1px solid #d9d9d9',borderRight:'0' ,display:'inline-block',width:'50%'}} >
          <div style={{
            display: 'flex',
            fontWeight: 'bold',
            lineHeight: '32px',
            height: '32px',
            background: 'rgb(249,249,249)',
          }}>
            <div style={{ width: '220px',
              paddingLeft: '10px',
              border: '1px solid #d9d9d9',

            }}>资产</div>
            {
              this.state.address.map((item,index)=>{
                return   <div title={item.name} key={index}
                              style={{ flex: '1', paddingLeft: '10px',
                                border: '1px solid #d9d9d9' ,
                                textAlign:'left',

                              }}>
                  {item.name}</div>
              })
            }
          </div>
          <div>
            {meterForms}
          </div>

        </div>
        <div style={{ border: '1px solid #d9d9d9' ,borderLeft:'0',display:'inline-block',width:'50%'}} >
          <div style={{
            display: 'flex',
            fontWeight: 'bold',
            lineHeight: '32px',
            height: '32px',
            background: 'rgb(249,249,249)',
          }}>
            <div style={{ width: '220px',
              paddingLeft: '10px',
              border: '1px solid #d9d9d9',

            }}>负债及所有者权益</div>
            {
              this.state.address2.map((item,index)=>{
                return   <div title={item.name} key={index}
                              style={{ flex: '1', paddingLeft: '10px',
                                border: '1px solid #d9d9d9' ,
                                textAlign:'left',

                              }}>
                  {item.name.split('_')[0]}</div>
              })
            }
          </div>
          <div>
            {meterForms2}
          </div>

        </div>
        <Form onSubmit={this.handleSubmit} style={{textAlign:'center',marginTop:'10px'}}>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               部门负责人
            </span>
            )}
          >
            {getFieldDecorator('director', {
              initialValue: this.props.editRecord?this.props.editRecord.customize.director:"",
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               制表
            </span>
            )}
          >
            {getFieldDecorator('author', {
              initialValue: this.props.editRecord?this.props.editRecord.customize.author:"",
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={''}
          >
            {getFieldDecorator('file', {
              rules: [{required: true, message:''}],
            })(
              <Upload {...props} style={{width:'100%'}}>
                <Button type={'primary'}>上传原文件</Button>
              </Upload>
            )}

          </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


